import React from 'react';
import { MOBILE_REG } from 'utils/consts';
import { Link } from 'react-router-dom';
import {
  Form,
  Input,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
} from 'antd';
import LogoHeader from '../../../components/Header/LogoHeader';

import styles from './index.module.less';

class BindEmail extends React.Component {
  state = {
    confirmDirty: false,
  };
  handleSubmit = ({ e }) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
  handleConfirmBlur = ({ e }) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };
  checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('请再次输入你的密码');
    } else {
      callback();
    }
  };
  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields([ 'confirm' ], { force: true });
    }
    callback();
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 24,
        },
        sm: {
          span: 24,
          offset: 0,
        },
      },
    };

    const rightContent = (
      <div className={styles.menuBox}>
        <Link className={styles.menuItem} to='/'>首页</Link>
        <Link className={styles.menuItem} to='/'>帮助中心</Link>
      </div>
    );

    return (
      <React.Fragment>
        <LogoHeader moduleName='绑定邮箱' rightContent={rightContent}/>
        <div className={styles.content}>
          <div className={styles.box}>
            <div className={styles.formBox}>
              <div className={styles.text1}>请填写可用的邮箱地址, 绑定您的账号</div>
              <div>
                <Form onSubmit={this.handleSubmit}>
                  <Form.Item
                    {...formItemLayout}
                  >
                    {getFieldDecorator('phone', {
                      rules: [
                        {
                          required: true,
                          message: '邮箱必填',
                        },
                        {
                          pattern: MOBILE_REG,
                          message: '请输入正确的邮箱',
                        },
                      ],
                    })(
                      <Input className={styles.input} placeholder='请输入需要绑定的邮箱'/>
                    )}
                  </Form.Item>
                  <Form.Item>
                    <Button type='primary' htmlType='submit' className={styles.button}>绑定</Button>
                  </Form.Item>
                </Form>
              </div>
              <div className={styles.text2}>
                <div>绑定成功后您将:</div>
                <div>1.接收平台活动、交易信息等操作通知</div>
                <div>2.重要信息操作,例如修改、找回账号密码等高危操作时用作身份验证。</div>
                <div className={styles.text3}>
                  <span>遇到麻烦？</span>
                  <span>请致电客服协助您400-681-6018(周一至周日 9:30-17:00)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Form.create()(BindEmail);
